<template>
  <div class="bgm-wrap">
    <Header/>

    <div class="upload-box">
      <van-uploader
        v-model="fileList"
        preview-size="1.3rem"
        :show-upload="!fileList.length"
        :max-count="1"
        :after-read="afterRead"
        :max-size="10000 * 1024"
        @oversize="onOversize"
      >
        <div class="upload-btn"></div>
      </van-uploader>
    </div>


    <div class="preview">
      <div class="text">您所选择的模板</div>
      <img class="choose-img" :src="step2Data.chooseData.value.mould_image">
    </div>

    <div class="next-wrap">
      <van-uploader
        v-if="fileList.length && fileList[0].status === 'done'"
        :after-read="reupload"
        :preview-image="false"
        :disabled="isLoading"
      >
        <div class="next-btn reupload"></div>
      </van-uploader>

      <div class="next-btn create" :class="{ 'van-uploader__wrapper--disabled': isLoading }" @click="create"></div>
    </div>
  </div>
</template>

<script setup>
  import { step2Data, stepAction, step1Data, resultData, isLoadingGlobal } from '@/stores'
  import { createPic, getUploadAuth, upload } from '@/api'

  let uploadData
  const fileList = ref([])
  const isLoading = ref(false)

  function onOversize() {
    showFailToast('图片大小不能超过10M')
  }

  async function afterRead(file) {
    const formData = new FormData()
    const { data: { auth_code } } = await getUploadAuth()

    formData.append('file', file.file)
    formData.append('auth_code', auth_code)

    file.status = 'uploading'
    file.message = '上传中..'

    isLoadingGlobal.value = true

    upload(formData)
      .then(({ data }) => {
        uploadData = data
        file.status = 'done'
      })
      .catch(() => {
        file.status = 'failed'
        file.message = '上传失败'
      })
      .finally(() => {
        isLoadingGlobal.value = false
      })
  }

  function reupload(file) {
    fileList.value = [file]
    afterRead(file)
  }

  function create() {
    if (!fileList.value.length) return showToast('请选择您的合拍照片')
    if (fileList.value.some(item => item.status === 'uploading')) return showToast('请等待图片完成上传')

    if (isLoading.value) return

    isLoading.value = true

    showLoadingToast({
      message: '合拍照片生成中',
      duration: 0,
      forbidClick: true,
    })

    createPic({
      face_url: uploadData.url, //上传接口中的url值
      mould_id: step2Data.chooseData.value.id, //所选择的风格
      name: step1Data.name.value.value, //姓名，如果为选择的入职的需要传入
      onduty_year: step1Data.year.value.value, //入职年份，如果为选择的入职的需要传入
    })
      .then(({ data }) => {
        resultData.value = data
        stepAction.next()
      })
      .finally(() => {
        closeToast()
        isLoading.value = false
      })
  }
</script>

<style scoped lang="scss">
  .next-wrap {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    left: 0;

    .reupload {
      background-image: url('@/assets/images/reupload.png');
    }

    .create {
      background-image: url('@/assets/images/create.png');
    }
  }

  .upload-box {
    width: 1.3rem;
    height: 1.3rem;
    margin: .14rem auto .3rem;
    border-radius: .3rem;

    .upload-btn {
      width: 1.3rem;
      height: 1.3rem;
      background: url('@/assets/images/upload.png') no-repeat center / 100% 100%;
    }
  }

  .preview {
    display: flex;
    flex-direction: column;
    align-items: center;

    .text {
      font-weight: bold;
      font-size: .12rem;
      color: rgba(255, 255, 255, .6);
      margin-bottom: .08rem;
    }
  }
</style>

<style>
  .van-uploader__preview-image {
    border-radius: .3rem;
  }

  .van-uploader__preview-delete--shadow {
    border-radius: .5rem;
    width: .2rem;
    height: .2rem;
    transform: scale(.8);
    background-color: rgba(0, 0, 0, .5);
  }

  .van-uploader__preview-delete-icon {
    font-size: .12rem;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .van-uploader__mask {
    border-radius: .3rem;
  }
</style>